<template>
    <div>
        <table-search 
            :total='tableData.total' 
            :page='searchForm.pageInfo.page' 
            :pageSize='searchForm.pageInfo.pageSize' 
            @size-change='handleSizeChange' 
            @current-change='handleCurrentChange'>
        <template #CardHeader>
            <div class="header">
                <el-button type="primary" size="small" icon="el-icon-plus" @click="handleAdd" v-action='"add"'>增加</el-button>
                <el-button
                    v-action='"remove"'
                    type="danger"
                    size="small"
                    icon="el-icon-delete"
                    @click="handleDelete"
                >批量删除</el-button>
            </div>
        </template>
        <template #search>
            <el-row
                :gutter='15'
                class='clear-both'
            >
                <el-col :span='24'>
                    <card-list
                        title='高级搜索'
                        type='keyvalue'
                        :show-header='true'
                    >
                        <template #btn>
                            <el-button-group>
                                <el-button
                                    icon='el-icon-search'
                                    size='mini'
                                    @click='submit'
                                >
                                    搜索
                                </el-button>
                            </el-button-group>
                        </template>
                        <template #keyvalue>
                            <el-form
                                ref='refForm'
                                class='card-list-form'
                                :model='searchForm'
                                :rules='rules'
                                size='mini'
                            >
                                <el-row :gutter='15'>
                                    <card-list-item
                                        width='100px'
                                        prop='name'
                                    >
                                        <template #key>
                                            姓名
                                        </template>
                                        <template #value>
                                            <el-input
                                                v-model='searchForm.projectName'
                                                placeholder='请输入姓名'
                                            />
                                        </template>
                                    </card-list-item>
                                    <card-list-item
                                        width='100px'
                                        prop='name'
                                    >
                                        <template #key>
                                            姓名
                                        </template>
                                        <template #value>
                                            <el-input
                                                v-model='searchForm.projectName'
                                                placeholder='请输入姓名'
                                            />
                                        </template>
                                    </card-list-item>
                                    <card-list-item
                                        width='100px'
                                        prop='name'
                                    >
                                        <template #key>
                                            姓名
                                        </template>
                                        <template #value>
                                            <el-input
                                                v-model='searchForm.projectName'
                                                placeholder='请输入姓名'
                                            />
                                        </template>
                                    </card-list-item>
                                    <card-list-item
                                        width='100px'
                                        prop='name'
                                    >
                                        <template #key>
                                            姓名
                                        </template>
                                        <template #value>
                                            <el-input
                                                v-model='searchForm.projectName'
                                                placeholder='请输入姓名'
                                            />
                                        </template>
                                    </card-list-item>
                                </el-row>
                                
                            </el-form>
                        </template>
                    </card-list>
                </el-col>
            </el-row>
        </template>
        <el-table
            :data="tableData.data"
            border
            style="width: 100%;"
            v-loading="tableData.loading"
            ref="multipleTable"
            tooltip-effect="dark"
            @selection-change="handleSelectionChange"
        >
            <template #empty>暂无数据</template>
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="name" label="姓名" :show-overflow-tooltip="true"/>
            <el-table-column prop="ip" label="IP" :show-overflow-tooltip="true" />
            <el-table-column prop="address" label="地址" :show-overflow-tooltip="true" />
            <el-table-column fixed="right" label="操作" width='160' align='center'>
                <template #default="scope">
                    <el-button type="primary" size="small" @click="handleEdit(scope.row)">修改</el-button>
                    <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        </table-search>
        <Dialog-add-or-update-app ref="addDialogEl" :type="type" :reload="reloadTable"></Dialog-add-or-update-app>
    </div>
</template>
<script lang='ts'>
import TableSearch from '../../components/TableSearch/index.vue'
import CardList from '/@/components/CardList/CardList.vue'
import CardListItem from '/@/components/CardList/CardListItem.vue'
import DialogAddOrUpdateApp from './dialogAddOrUpdateApp.vue'
import { getAppList, deleteApp } from '/@/api/components/app'
import { defineComponent, reactive, ref, toRefs } from 'vue'
import { ISearchForm,IRenderTableList } from '/@/type/views/AppList'
import { ElMessage,ElMessageBox } from 'element-plus'
import { getArrKey } from '/@/utils'
import { validate } from '/@/utils/formExtend'

// 键值对样式，及表单校验
const search = (table: ITable<IRenderTableList>, form: ISearchForm) => {
    const rules = reactive({})
    const refForm = ref(null)
    const submit = async() => {
        if(!await validate(refForm)) return
        table.page = 1
        renderTableList(table, form)
    }
    return {
        rules,
        submit,
        refForm
    }
}
const renderTableList = async(table:ITable<IRenderTableList>,searchForm:ISearchForm)=>{
    table.loading = true
    const data = await getAppList(searchForm)
    table.loading = false
    table.data = data.data.Data.dataList
    table.total = data.data.Data.count
}

const tableRender = (table:ITable<IRenderTableList>,searchForm:ISearchForm,addDialogEl:any,state:IObject<any>)=>{
    renderTableList(table,searchForm)
    const handleSelectionChange = (val: any) => (table.selectTableArr = val)
    const handleSizeChange = (val:number) => (searchForm.pageInfo.pageSize = val) && renderTableList(table,searchForm)
    const handleCurrentChange = (val:number) => (searchForm.pageInfo.page = val) && renderTableList(table,searchForm)
    const handleAdd = ()=>(state.type='add') && addDialogEl.value.open()
    const handleEdit = (row:Object)=>(state.type='edit') && addDialogEl.value.open(row)
    const handleDelete = (row:any)=>{
            let ids:number[]|number
            if(row.AppID){
                ids = [row.AppID]
            }else{
                if (!table.selectTableArr || table.selectTableArr.length==0) {
                    ElMessage({ message: '请至少选择一条', type: 'warning' });return
                }
                ids = getArrKey(table.selectTableArr, 'AppID')
            }
            ElMessageBox.confirm('确定删除码?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                await deleteApp({ appID: ids })
                ElMessage.success('删除成功')
                table.page = 1
                renderTableList(table,searchForm)
            }).catch(() => {
                ElMessage({
                    type: 'info',
                    message: '已取消删除'
                });
            });
    }
    return {table,handleSelectionChange,handleEdit,handleAdd,handleDelete,handleSizeChange,handleCurrentChange}
}
export default defineComponent({
    name: 'AppList',
    components:{
        TableSearch,
        CardList,
        CardListItem,
        DialogAddOrUpdateApp
    },
    setup() {
       const state = reactive({
           loading:false,
           type:'add'
       })
        const addDialogEl = ref(null)
        const searchForm:ISearchForm = reactive({
            pageInfo:{
                page:1,
                pageSize:10
            },
            name:'',
        })
        const tableData:ITable<IRenderTableList> = reactive({
            data:[],
            total:0,
            selectTableArr:[],
            loading:false
        })
        const reloadTable = ()=>{
            tableRender(tableData,searchForm,addDialogEl,state)
        }
        return {
            ...toRefs(state),
            searchForm,
            tableData,
            addDialogEl,
            reloadTable,
            ...tableRender(tableData,searchForm,addDialogEl,state),
            ...search(tableData,searchForm)
        }
    },
})
</script>